<template>
	<block class="warp" style="background-color: #FFFFFF;">
		<view class="home_top"></view>
		<view :style="{
			color: '#FFFFFF',
			width: '100%',
			display: 'flex',
			'justify-content': 'center',
			'position': 'fixed',
			top: statusBarHeight,
		}">订单管理</view>
		<scroll-view class="box_content flex">

			<!-- <view class='searchGood select'>
				<view class='search acea-row row-between-wrapper flex'>
					<text class='iconfont' style="color: #999999;font-size:55rpx;">&#xe66a;</text>
					<input type='text' style="width: 70%;" v-model='keyword' placeholder='输入关键词'
						placeholder-class='placeholder' />
				</view>
				<view class="btn">
					查询
				</view>
			</view> -->


			<view class="tab">
				<tab :tabTitle="tabTitle" @childFn="parentFn"></tab>
			</view>
			<scroll-view class="shop_item" scroll-y>
				<view class="item" v-for="(item,index) in list" :key="index"  @click="oderInfo(item.id)">
					<image :src="item.image" style="width: 150rpx;height: 150rpx;"></image>
					<view class="orderNo">订单号:{{item.orderNo}}</view>
					<view class="name">师傅:{{item.name}}</view>
					<view class="time">日期:{{item.time}}</view>
					<!-- <view class="status">{{item.status}}</view> -->
					<view class="opration" :class="tabClick == 0?'active':''">待受理</view>
					<view class="opration oprationtwo" :class="tabClick == 1?'active':''">进行中</view>
					<view class="opration oprationthree" :class="tabClick == 2?'active':''">已完成</view>
				</view>
				<view class="end">
					共{{list.length}}条订单
				</view>
			</scroll-view>
		</scroll-view>
	</block>
</template>

<script>
	import tab from '../../tab.vue'
	import {WorkerWorkList} from '../../../api/api.js'
	export default {
		components: {
			tab
		},
		data() {
			return {
				tabTitle: [{
						name: "待受理",
						id: 1
					},
					{
						name: "进行中",
						id: 2
					},
					{
						name: "已完成",
						id: 3
					},
				],
				list: [{
						orderNo: "XKSD325767",
						status: '已完成',
						time: "2021-07-08",
						name: "林俊杰",
						id:"12",
						image: "https://img0.baidu.com/it/u=1572507086,3815096171&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						orderNo: "XKSD325767",
						status: '已完成',
						time: "2021-07-08",
						name: "林俊杰",
						id:"12",
						image: "https://img0.baidu.com/it/u=1572507086,3815096171&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						orderNo: "XKSD325767",
						status: '已完成',
						time: "2021-07-08",
						name: "林俊杰",
						id:"12",
						image: "https://img0.baidu.com/it/u=1572507086,3815096171&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						orderNo: "XKSD325767",
						status: '已完成',
						time: "2021-07-08",
						name: "林俊杰",
						id:"12",
						image: "https://img0.baidu.com/it/u=1572507086,3815096171&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						orderNo: "XKSD325767",
						status: '已完成',
						time: "2021-07-08",
						name: "林俊杰",
						id:"12",
						image: "https://img0.baidu.com/it/u=1572507086,3815096171&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						orderNo: "XKSD325767",
						status: '已完成',
						time: "2021-07-08",
						name: "林俊杰",
						id:"12",
						image: "https://img0.baidu.com/it/u=1572507086,3815096171&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						orderNo: "XKSD325767",
						status: '已完成',
						time: "2021-07-08",
						name: "林俊杰",
						id:"12",
						image: "https://img0.baidu.com/it/u=1572507086,3815096171&fm=26&fmt=auto&gp=0.jpg"
					},
				],
				statusBarHeight: "",
				keyword: "",
				tabClick: 0, //选中的序号
				
			}
		},
		created() {
			this.statusBarHeight = uni.getStorageSync('statusBarHeight')
			this.datainit()
		},
		methods: {
			// 数据初始化
			datainit(){
				let data= {}
				WorkerWorkList(data).then(res=>{
					
				})
			},
			/* 组件选中的序列号传值 */
			parentFn(payload) {
				//父组件获取子组件的值
				this.tabClick = payload;
				
				/* 这里要从新加载数据 */
			},

            /* goto: tabClick==0 去受理订单 ，tabClick==1 去进行订单 ，tabClick ==3 查看完成的订单*/
            oderInfo(data){
				let that = this;
				let id = data;
				if( that.tabClick == 0){
					console.log(that.tabClick )
					uni.navigateTo({
						url: `/pages/sfOrderPend/sfOrderPend?id=${data}`
					})
				}
				if( that.tabClick == 1){
					console.log(that.tabClick )
					uni.navigateTo({
						url: `/pages/sfOrderOngo/sfOrderOngo?id=${data}`
					})
				}
				if( that.tabClick == 2){
					console.log(that.tabClick )
					uni.navigateTo({
						url: `/pages/sfOrderInfo/sfOrderInfo?id=${data}`
					})
				}
			}


		},


	}
</script>

<style scoped lang="less">
	.home_top {
		background-image: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		background-size: cover;
		width: 750upx;
		height: 370upx;
		padding: 20upx;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
	}

	.box_content {
		display: flex;
		position: absolute;
		top: 160rpx;
		background-color: #FFFFFF;
		bottom: 0;
	}

	.select {
		position: fixed;
		width: 100%;
		line-height: 150rpx;
		height: 150rpx;

		background-color: #FFFFFF !important;
		z-index: 99;
		top: 170rpx;
	}

	.searchGood {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-start;
		padding: 0 30rpx;
		width: 100%;
		height: 60rpx;
	}

	.searchGood .search {
		background-color: #F8F8F8;
		border-radius: 30rpx;
		padding-left: 30rpx;
	}

	.searchGood .search .input {
		width: 100%;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
	}

	.searchGood .search .input input {
		width: 472rpx;
		font-size: 28rpx;
	}

	.searchGood .search .input .placeholder {
		color: #999999 !important;
	}

	.searchGood .search .input .iconfont {
		color: #999999;
		font-size: 35rpx;
	}

	.searchGood .search .bnt {
		width: 120rpx;
		text-align: right;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.searchGood .title {
		font-size: 28rpx;
		color: #999999;
		margin: 50rpx 30rpx 25rpx 30rpx;
	}

	.searchGood .list {
		padding-left: 10rpx;
	}

	.searchGood .list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		height: 60rpx;
		border-radius: 3rpx;
		line-height: 60rpx;
		border: 1rpx solid #aaa;
		margin: 0 0 20rpx 20rpx;
	}

	.searchGood .line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}

	.btn {
		background-color: #5490FE;

		padding: 10rpx;
		display: block;
		color: #FFFFFF;
		border-radius: 10rpx;
		width: 100rpx;
		margin-left: 50rpx;
		text-align: center;
		line-height: 40rpx;

	}

	.tab {
		display: block;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		z-index: 99;
		position: fixed;
		top: 160rpx;
	}


	.shop_item {
		display: block;
		padding: 30rpx;
		width: 100%;
		position: fixed;
		top: 220rpx;
		height: calc(78%);
		box-sizing: border-box;

		.end {
			margin-top: 50rpx;
			color: #333333;
			display: block;
			text-align: center;
			line-height: 60rpx;
			height: 60rpx;
			box-sizing: border-box;
		}

		.item {
			width: 100%;
			margin-top: 25rpx;
			box-shadow: 0rpx 0rpx 13rpx rgba(0, 0, 0, 0.1);
			height: 200rpx;
			position: relative;
			border: 1px solid #e0e0e0;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			.name {
				position: absolute;
				top: 78rpx;
				color: #999999;
				left: 170rpx;
			}

			.orderNo {
				position: absolute;
				top: 20rpx;
				color: #333333;
				font-size: 32rpx;
				left: 170rpx;
			}

			.time {
				position: absolute;
				top: 130rpx;
				color: #999999;
				left: 170rpx;
			}

			.status {
				position: absolute;
				top: 30rpx;
				color: #999999;
				right: 30rpx;
			}

			image {
				position: absolute;
				top: 30rpx;
				left: 10rpx;
				border-radius: 10rpx;
			}

			.opration {
				position: absolute;
				color: #FFFFFF;
				right: 30rpx;
				top: 124rpx;
				background-color: #A0D675;
				padding: 5rpx 10rpx;
				border-radius: 5rpx;
				background: #FEC860;
				display: none;
			}
			.opration.active{
				display: inline-block;
			}
			.oprationtwo{
			   background: #5490FE;
			}
			.oprationthree{
				background: #f1f1f1;
				color: #999999;
			}


		}
	}
</style>
